const React = require('react');
const {
  View,
  StyleSheet,
} = require('react-native');
const {
  JDDevice,
  JDButton,
  JDText,
  JDPopupWindow,
  JDRouter,
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;

class JDPopupWindowExample extends React.Component {
  state = {
    show: false,
  };

  render() {
    return (
      <View style={styles.wrapper}>
        <NavigationBar Title="JDPopupWindow" />
        <View style={styles.body}>
          <JDButton onPress={this._onShow}>显示底部弹窗</JDButton>
        </View>
        <JDPopupWindow show={this.state.show} onHide={this._onHide} height={410}>
          <View style={styles.actionSheet}>
            <View style={styles.actions}>
              <JDButton contentContainerStyle={styles.actionItem} textStyle={styles.actionItemText}>示例菜单</JDButton>
              <JDButton contentContainerStyle={styles.actionItem} textStyle={styles.actionItemText}>示例菜单</JDButton>
              <JDButton contentContainerStyle={styles.actionItem} textStyle={styles.actionItemText}>示例菜单</JDButton>
              <JDButton contentContainerStyle={[styles.actionItem, {borderBottomWidth: 0}]} textStyle={styles.actionItemText}>示例菜单</JDButton>
            </View>
            <JDButton onPress={this._onHide} style={styles.cancel} contentContainerStyle={[styles.actionItem, {borderBottomWidth: 0}]} textStyle={styles.actionItemText}>取消</JDButton>
          </View>
        </JDPopupWindow>
      </View>
    );
  }

  _onShow = () => {
    this.setState({
      show: true,
    });
  };

  _onHide = () => {
    this.setState({
      show: false,
    });
  };
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
  },

  actionSheet: {
    backgroundColor: '#efeff4'
  },
  actionItem: {
    backgroundColor: '#FFF',
    borderColor: '#D9D9D9',
    borderBottomWidth: JDDevice.getDpx(1),
  },
  actionItemText: {
    color: '#000',
    fontSize: JDDevice.getFontSize(32),
  },
  cancel: {
    marginTop: JDDevice.getRpx(10),
    borderBottomWidth: 0
  }
});

module.exports = JDPopupWindowExample;
